<script setup>
import {onMounted, ref} from "vue";
import {ElTable,ElRow,ElCol,ElMenu,ElSubMenu,ElMenuItemGroup,ElMenuItem,ElIcon,ElTag} from "element-plus";
import {Document,Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue';
import Store from "@/store/managerStore.js"
import axios from "@/utils/NetWork.js"
const store = Store();
onMounted(async ()=>{
  await store.getEntry()
      .then(res=>console.log(res))
})
const tagType = {
  blog:"info",
  image:"primary",
}
const filterOption = t=>store.type=t; // 更改展示的type
const deleteData = row=>{
  axios.get(`/manager/delete?id=${row.id}`).then(res=>{
    console.log(res.data)}
  )
      .then(res=>{
        store.getEntry()
      })
}
</script>

<template>
    <el-row class="tac">
      <el-col :span="4">
        <h5 class="mb-2">Default colors</h5>
        <el-menu
            default-active="entry-all"
            class="el-menu-vertical-demo"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>条目</span>
            </template>
            <el-menu-item index="entry-all" @click="filterOption('all')">全部</el-menu-item>
            <el-menu-item index="entry-image" @click="filterOption('image')">图片(image)</el-menu-item>
            <el-menu-item index="entry-blog" @click="filterOption('blog')">文章(blog)</el-menu-item>
            <el-menu-item index="entry-video" @click="filterOption('video')">视频(video)</el-menu-item>
            <el-menu-item index="entry-movie" @click="filterOption('movie')">电影(movie)</el-menu-item>
            <el-menu-item index="entry-audio" @click="filterOption('audio')">音频(audio)</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>更多</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="store.data">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="dir" label="文件路径" width="100"></el-table-column>
          <el-table-column prop="uid" label="uid" width="200"></el-table-column>
          <el-table-column prop="type" label="Type" width="100" >
          <template #default="scope">
            <el-tag :type="tagType[scope.row.type]" >{{ scope.row.type }}</el-tag>
          </template>
          </el-table-column>
          <el-table-column prop="filename" label="文件名" width="140"></el-table-column>
          <el-table-column prop="fullname" label="存储文件名" width="240"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
                <el-button @click="()=>deleteData(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
</template>

<style scoped>
.tac{
  height: 90%;
  box-sizing: border-box;
}
</style>